<template>
  <div class="map">
    <WebGmap ref="refMap" msg="" />
  </div>
  <div class="right-wrap">
    <el-row class="topinfor">
      <h2>位置查询：</h2>
      <el-col><el-input placeholder="请输入地址名称" v-model="pointName" /></el-col>

      <el-col class="btn">
        <el-button type="primary" @click="handleCheckWeizhi">查询</el-button>
        <el-button>返回</el-button>
      </el-col>
    </el-row>
    <el-row class="maininfor"><h2>区域信息：</h2></el-row>
    <el-row>
      <el-form ref="ruleFormRef" :model="formData" :rules="formRules" class="ruleForm" status-icon>
        <el-form-item label="区域名称1：" prop="areaName">
          <el-input v-model="formData.areaName" />
        </el-form-item>
        <el-form-item label="区域描述：" prop="areaDesc">
          <el-input v-model="formData.areaDesc" />
        </el-form-item>
        <el-form-item label="区域形状：" prop="radio">
          <el-radio-group v-model="formData.radio" disabled>
            <el-radio label="1" size="small">圆形</el-radio>
            <el-radio label="2" size="small">多边形</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地理位置：" prop="locationName">
          <el-input v-model="formData.locationName" />
        </el-form-item>
        <el-form-item label="区域半径（m）：" prop="radius">
          <el-input v-model="formData.radius" @input="handleRadius" />
        </el-form-item>
        <el-form-item label="中心经度：" prop="lng">
          <el-input v-model="formData.lng" disabled />
        </el-form-item>
        <el-form-item label="中心纬度：" prop="lat">
          <el-input v-model="formData.lat" disabled />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="drawMap"> 绘制 </el-button>
          <el-button type="primary" @click="againMap">重绘</el-button>
          <el-button @click="handleUpdate">更新</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="EquippedWithFence">
import mitt from '@/utils/mitter'
let radio = '1'
let areaDesc: Ref<string> = ref('')
let areaName: Ref<string> = ref('')
let locationName: Ref<string> = ref('')
let centerlatlng = reactive({ lat: 0, lng: 0, radius: 200 })
const refMap = ref()
const ruleFormRef = ref()
let pointName: Ref<string> = ref('')
const formRules = reactive({
  areaName: [{ required: true, message: '区域名称不能为空', trigger: 'blur' }],
  radio: [{ required: true, message: '区域形状不能为空', trigger: 'blur' }]
})
let handleCheckWeizhi = () => {
  // 调用组件方法
  LOG.Log('handpointNameChange', pointName.value)
  mitt.emit('handpointNameChange', pointName.value)
}
let formData = ref({
  areaName: undefined,
  areaDesc: undefined,
  radio: 1,
  locationName: undefined,
  radius: 200,
  lng: 0,
  lat: 0
})
let drawMap = () => {
  refMap.value.switchCursor(true)
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    areaName: undefined,
    areaDesc: undefined,
    radio: 1,
    locationName: undefined,
    radius: 200,
    lng: 0,
    lat: 0
  }
  // formRef.value?.resetFields()
}
let againMap = () => {
  // resetForm()
  ruleFormRef.value?.resetFields()
  refMap.value.destroyMap()
}
let handleRadius = () => {
  mitt.emit('handradiusChange', formData.value.radius)
}

let handleUpdate = () => {}
onMounted(() => {
  mitt.on('handlatlngChange', (latlngInfo: { lat: number; lng: number }) => {
    LOG.Log('地图选中经纬度456:', latlngInfo)
    centerlatlng.lat = latlngInfo.lat
    centerlatlng.lng = latlngInfo.lng
  })
  mitt.on('handleweizhi', (val: string) => {
    LOG.Log('经纬度位置地理名称88:', val)
    locationName.value = val
  })
})
</script>

<style lang="scss" scoped>
.map {
  width: calc(100% - 400px);
  height: 100vh;
}

.right-wrap {
  position: absolute;
  top: 0;
  right: 0;
}

.topinfor {
  padding: 10px;

  h2 {
    padding-top: 10px;
    margin-bottom: 10px;
  }

  .btn {
    padding-top: 10px;
    padding-left: 10px;
  }
}
.maininfor {
  h2 {
    padding-left: 10px;
  }
}
.ruleForm {
  padding-left: 10px;
}
</style>
